/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js}"
  ],
  theme: {
    extend: {
      fontFamily: {
        default: ['Helvetica', 'Noto Sans TC', 'sans-serif'],
      },
      colors: {
        orange: '#ff5601',
        orangeLight: '#ec7f47',
        orangeDark: '#eb4f37',
        gray: '#dadada',
        grayDark: '#989898',
        grayCard: '#edf1fc',
        grayLight: '#f7f9fa',
        grayMuted: '#524c49',
        grayBlack: '#3e3e3e',
        grayHeader: '#524c49',
        black: '#2c3134',
        purple: '#2d3376',
        purpleLight: '#62297a',
        muted: '#c2c2c2',
      },
      boxShadow: {
        xl: '0 8px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
      },
      width: {
        '1200': '1200px'
      },
      backgroundImage: {
        'sm': "url('@/assets/images/CDN_banner_mobile.webp')",
        'md': "url('@/assets/images/CDN_event_banner.webp')",
        'lg': "url('@/assets/images/CDN_event_banner.webp')"
      },
      fontSize: {
        '38px': '38px'
      }
    },
  },
  plugins: [],
}
